<style>
    body {
        display: none;
        flex-direction: row;
        background: url(__IMG__/login_bg.jpg) no-repeat;
        background-size: 100%;
        height: 100Vh;
        justify-content: center;
        align-items: center;
    }

    #login {
        background: rgba(255, 255, 255, 0.8);
        width: 550px;
        height: 350px;
        border-radius: 15px;
        margin-top: -5%;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    .w100 {
        width: 100%;
    }

    h1 {
        color: darkblue;
    }

    .err_p {
        display: block;
        clear: both;
        position: relative;
        left: 26.5%;
        margin-top: -15px;
        margin-bottom: 0;
        color: #a94442;
        height: 15px;
        font-size: 12px
    }
</style>

<div id="login">
    <div class="col-sm-3"></div>
    <div class="col-sm-8 mb20"><h1>后台管理系统</h1></div>
    <form id="form1" class="form-horizontal" action="/login/loginForm" method="post" style="width: 90%">
        <div class="form-group mb0 has-feedback">
            <label for="username" class="col-sm-3 control-label"><span class="text-danger">*</span>用户名：</label>
            <div class="col-sm-8">
                <input value="xuzhenkun" maxlength="16" type="text" class="form-control" name="username" id="username" placeholder="用户名">

            </div>

        </div>
        <span class="err_p"></span>
        <div class="form-group has-feedback">
            <label for="password" class="col-sm-3 control-label"><span class="text-danger">*</span>密&#12288;码：</label>
            <div class="col-sm-8">
                <input type="password" value="123456" maxlength="10" name="password" class="form-control" id="password" placeholder="密&#12288;码">
            </div>
        </div>
        <span class="err_p"></span>
        <div class="form-group has-feedback">
            <label for="captcha" class="col-sm-3 control-label"><span class="text-danger">*</span>验证码：</label>
            <div class="col-sm-4">
                <input type="text" maxlength="4" class="form-control" name="captcha" id="captcha" placeholder="验证码">
            </div>
            <div style="margin-top:-2px;margin-bottom:-8px;">
                <img src="{$img}" alt="验证码" height="40px">
                <button type="button" class="btn btn-link"
                        onclick="this.previousSibling.previousSibling.src = '{$img}?r='+Math.random();">刷新
                </button>
            </div>
        </div>
        <span class="err_p"></span>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-4">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="remember"> 记住密码(7天)
                    </label>
                </div>
            </div>
            <div class="col-sm-offset-1 col-sm-4">
                <button type="button" class="btn btn-link">忘记密码</button>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
                <button type="submit" class=" w100 btn btn-info">登录</button>
            </div>
        </div>
    </form>
</div>

<script>
    $(function(){
        if(window.self !== window.top){
            window.top.location.href = '/login/index.html';
            return false;
        }else {
            $('body').css('display','flex');
        }

        $("#form1").validate({
            rules: {
                username: {
                    required: true,
                    username: true
                },
                password: {
                    required: true,
                    password: true
                },
                captcha: {
                    required: true,
                    length: 4,
                    remote:{
                        url: '/common/checkCaptcha',
                        type: "post",               //数据发送方式
                        dataType: "json",           //接受数据格式
                        data: {                     //要传递的数据
                            captcha: function() {
                                return $("#captcha").val();
                            }
                        }
                    }
                },
            },
            messages: {
                captcha:{
                    remote:'验证码错误,请刷新重试'
                }
            },
            errorElement:"span",
            //跟一个函数，可以自定义错误放到哪里。
            errorPlacement:function(error,element) {
                error.appendTo(element.parent("div").parent("div").next());
            },
            highlight: function(element, errorClass, validClass) { // element出错时触发
                $(element).parent().parent().addClass('has-error');
                var $content = $(' <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>\n' +
                    '  <span class="sr-only">(error)</span>');
                $(element).parent().find('span').remove();
                $(element).parent().append($content);
            },
            unhighlight: function(element, errorClass) { // element通过验证时触发
                $(element).parent().parent().removeClass('has-error').addClass('has-success');
                var $content = $('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>\n' +
                    '                <span class="sr-only">(success)</span>');
                $(element).parent().find('span').remove();
                $(element).parent().append($content);
            }
        });
    });
</script>
